<template>
  <div v-if="!isBlock()" :class="['navbar',navData.noFixed?'':'fixed',theme+'_theme']">
    <!-- 左侧单一操作项 childnum<=1 -->
    <div class="part left_part">
      <!-- 返回按钮（可传递返回路径，默认上一页） -->
      <span
        v-if="navData.leftIcon"
        :class="'l_item nav_icon arrow left ' + themeHash[theme].leftIcon"
        @click="goBack(navData.path)"
      ></span>
      <!-- 特殊按钮。例如 问号？ -->
      <slot name="veryLeftIcon"></slot>
    </div>

    <span class="part center_part bold-text" v-text="navData.title"></span>
    <slot v-if="navData.custumerCenter" name="veryCenterIcon"></slot>

    <!-- 右侧单一操作项 childnum<=1 -->
    <div class="part right_part">
      <!-- 页面刷新按钮 -->
      <img
        v-if="navData.rightIcon"
        class="r_item nav_icon"
        src="/game/static/images/register/f5.png"
        @click="reloadPage()"
      />
      <!-- 超链接按钮（可传递 链接名称 和 链接地址） -->
      <router-link
        v-else-if="navData.rightLink"
        class="r_item mini-text"
        :to="{name:navData.rightLink.path,query:navData.rightLink.query||{}}"
      >{{navData.rightLink.text}}</router-link>
      <!-- 特殊按钮。例如 问号？ -->
      <slot name="veryRightIcon"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'nabBarCom',
  props: {
    theme: {
      type: String,
      default: 'default'
    },
    navData: {
      type: Object,
      default: () => ({
        title: 'Title',
        path: '/',
        leftIcon: false,
        leftHome: false,
        custumerCenter: false,
        rightIcon: false,
        rightLink: {
          path: '',
          text: '',
          query: {}
        },
        noFixed: false
      })
    } // leftXx相关 与 rightXx相关 单独存在或不存在
  },
  data () {
    return {
      themeHash: {
        default: {
          leftIcon: 'black'
        },
        black: {
          leftIcon: 'white'
        },
        red: {
          leftIcon: 'white'
        }
      }
    }
  },
  methods: {
    goBack: function (pathname) {
      if (pathname) {
        this.$router.push({ name: pathname })
      } else {
        this.$router.go(-1)
      }
    },
    goHome: function () {
      this.$router.push('/')
    },
    reloadPage: function (path) {
      window.location.reload()
    }
  },
  mounted () {
    this.$nextTick(function () {
      document.title = this.navData.title
    })
  }
}
</script>
<style lang="scss" scoped>
@import "../sass/common.scss";
.fixed {
  position: fixed;
  top: 0;
}
.navbar {
  // background: linear-gradient(90deg, #6a60ee 0%, #5bcbfb 75%);
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $navbarHeight;
  width: 100%;
  z-index: 999;
  .part {
    height: 100%;
    width: 20%;
    display: flex;
    align-items: center;
  }
  .left_part {
    text-align: left;
    justify-content: flex-start;
    .l_item {
      margin-left: 30px;
    }
  }
  .center_part {
    width: 60%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    line-height: 105px;
  }
  .right_part {
    text-align: right;
    justify-content: flex-end;
    .r_item {
      margin-right: 30px;
    }
  }
  span,
  a {
    color: 000;
  }
  .nav_icon {
    width: 44px;
    height: 44px;
  }
}
.default_theme {
  background: #fff;
}
.red_theme {
  background: #ff5256;
  span,
  a {
    color: #fff;
  }
}
.black_theme {
  background: #000;
  span,
  a {
    color: #fff;
  }
}
</style>
